import Typography from '@/pages/OrderModule/common/components/Typography';
import { Alert } from 'antd';
import OrderStatusLabelValue from './OrderStatusLabelValue';

/**
 * 订单数量统计，以及状态分类
 * @param {object} props
 * @param {string} props.wrapStyle 最外面的style
 * @param {array} props.data 订单数据
 */
function OrderNumberCount(props) {
  const { wrapStyle = {}, data = [] } = props || {};

  const totalVal = data.reduce((total, item) => (total += item.value), 0);

  return (
    <Alert
      style={wrapStyle}
      message={
        <Typography as="s1">
          预估{totalVal}个订单即将被处理：
          {data.map((item, index) => {
            return (
              <span key={item.label}>
                <OrderStatusLabelValue label={item.label} type={item.type} value={item.value} />
                {data.length - 1 !== index && '、'}
              </span>
            );
          })}
        </Typography>
      }
    />
  );
}
export default OrderNumberCount;
